<template>
  <div>
    <div style="width:95%;height:200px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <div style="width:20%;height:200px;float: left;top: 30px;position: relative;left: 50px;">
        <el-image style="width: 100px; height: 100px" src="http://www.bai.com" :fit="fit">
        </el-image>
      </div>

      <div style="float: left;width: 75%;top: 30px;position: relative;">
        <div class="demo-input-size">


          <el-form :model="searchObj">
            <el-row>
              <el-col :span="12">
                <el-row>
                  <el-form-item label="学员名字" :label-width="formLabelWidth">
                    <el-input placeholder="请输入学员名字" size="small" v-model="searchObj.name" style="width: 200px;"
                      clearable @clear="nameClear" />

                  </el-form-item>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-form-item label="用户职位" :label-width="formLabelWidth">
                    <template>

                      <el-select v-model="roleName" placeholder="请选择" @change="roleChange()" @clear="roleClear"
                        clearable>
                        <el-option v-for="(item,index) in roles" :key="index" :value="item.role">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                </el-row>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-row>
                  <el-form-item label="用户部门" :label-width="formLabelWidth">
                    <template>
                      <el-select v-model="departmentNames" placeholder="请选择部门" @clear="departmentClear"
                        @change="departmentChange" clearable>
                        <el-option v-for="(item,index) in departmentList" :key="index" :value="item.departmentName">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                </el-row>
              </el-col>

              <el-col :span="8" :offset="4">
                <el-row>
                  <el-button type="primary" @click="search">确 定</el-button>
                </el-row>
              </el-col>





            </el-row>
          </el-form>


        </div>
      </div>

    </div>
    <br>
    <br>
    <br>
    <button>点击添加</button>
    <!--信息展示 -->
    <div style="height: 900px;width: 100%;">
      <el-table :data="userTrainCourseMsgList" border style="width: 100%">
        <el-table-column prop="name" label="姓名" fixed width="180">
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" sortable width="180">
        </el-table-column>
        <el-table-column prop="role" label="职位" sortable width="180">
        </el-table-column>
        <el-table-column prop="joinTrainNum" sortable label="参与的培训" width="180">
        </el-table-column>
        <el-table-column prop="joinCourseNum" label="参与的课程" width="180">
        </el-table-column>
        <el-table-column prop="runTrainNum" label="进行中培训" width="180">
        </el-table-column>
        <el-table-column prop="runCourseNum" label="进行中课程" width="180">
        </el-table-column>
        <el-table-column prop="courseTimeNum" label="学习总时长" width="180">
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm" @callFather="callFather">
      </Pagination>

      </el-tab-pane>

    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import userApi from '@/api/user'
  import departmentApi from '@/api/department'
  import roleApi from '@/api/role'
  import trainApi from '@/api/train'
  export default {
    data() {
      return {
        trainId: 1,
        train: {},
        isok: true,
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10,
        },

        father_Change: 0,
        father_test: 0,
        account: '',
        formLabelWidth: '180px',
        inputObj: {
          width: '200px'
        },
        fit: 'fill',
        departmentList: [], //部门对象
        departmentNames: '',
        searchObj: {
          name: ''
        }, //查询对象
        roles: [], //角色数组
        roleName: '',
        userTrainCourseMsgList: [], //用户课程 培训 
        listtest: [], //用户课程 培训 
        name: ''
      }
    },

    // 注册组件
    components: {
      Pagination,
    },

    created() {
      this.findAllDepartment();
      this.getAllRole()
      this.getUserAllMsg()
    },


    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      //查找当前课程的信息
      findTrainById() {
        userTrainApi
          .findTrainById(this.trainId)
          .then((response) => {
            //把当前的课程id 赋给这个搜索对象

            this.train = response.data
            this.trainSearch.console.log(response)
          })
          .catch((e) => {})
      },
      //获得当前课程的所有学员信息
      findTrainUser(trainId, currentPage, pageSize) {
        userTrainApi
          .findTrainUser(trainId, currentPage, pageSize)
          .then((response) => {
            this.userTrainList = response.data.list
            console.log('获取课程所有学员信息', this.userTrainList)
          })
          .catch((e) => {})
      },
      // 通过事件  更改用户的培训状态
      verifyUser(userScoreId, status) {
        this.UserScoreDto.userScoreId = []
        this.UserScoreDto.userScoreId.push(userScoreId)
        userTrainApi.verifyUser(status, this.UserScoreDto).then((response) => {
          if (response.code == 200) {
            this.$message({
              message: '修改状态成功',
              type: 'success',
            })
            // 调用方法 重新获取值
            this.findTrainUser(
              this.trainId,
              this.pageparm.currentPage,
              this.pageparm.pageSize
            )
          }
        })
        console.log(scope)
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },

      handleClick(tab, event) {
        let id = tab.index
        if (id == 1) {
          this.father_Change = this.trainId
        } else if (id == 2) {
          this.father_test = this.trainId
        } else {}
        console.log(tab, event)
      },
      //获得所有部门信息
      findAllDepartment() {
        departmentApi
          .findAllDepartment()
          .then((response) => {
            console.log('所有部门', response)
            this.departmentList = response.data
          })
          .catch()
      },
      //获得当前选择的部门
      departmentChange(department) {
        // console.log(department)
        for (const key in this.departmentList) {
          // console.log(this.departmentList[key].departmentName)
          if (this.departmentList[key].departmentName == department) {
            this.searchObj.departmentName = this.departmentList[key].departmentName
            console.log(this.searchObj.departmentName)
          }
        }
      },
      //获得当前选择的角色
      roleChange(role) {
        console.log(role);
        for (const key in this.roles) {
          console.log(this.roles[key].role);
          if (this.roles[key].role == this.roleName) {
            this.searchObj.roleId = this.roles[key].id
            console.log(this.searchObj.roleId)
          }
        }
      },
      //获取所有角色
      getAllRole() {
        roleApi
          .findAllRole()
          .then((response) => {
            this.roles = response.data
            console.log('所有角色', this.roles)
          })
          .catch()
      },
      //查询所有学员的培训情况
      getUserAllMsg() {
        trainApi.getUserAllMsg(this.pageparm.currentPage, this.pageparm.pageSize, this.searchObj).then(response => {
          console.log("学员信息", response);
          this.userTrainCourseMsgList = response.data.list
          console.log(this.userTrainCourseMsgList);
        })
      },
      //搜索方法
      search() {
        console.log(this.searchObj);
        this.getUserAllMsg()
      },
      fit() {},
      roleClear(id) {

        this.searchObj.roleId = ''
      },
      departmentClear() {
        this.searchObj.departmentName = ''
      },
      nameClear() {
        this.searchObj.name = ''
      }

    },
  }

</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .my-label {
    background: #e1f3d8;
  }

  .my-content {
    background: #fde2e2;
  }

  .input_float {
    float: left;
  }

</style>
